import { Icon, Tag, Typography } from 'antd';
import React, { useContext } from 'react';
import get from 'lodash/get';
import Space from '@/components/Space';
import {
  ARRAY_MAPPING,
  ARRAY_PASS_THROUGH,
  ARRAY_REPLACEMENT,
  CONST_RULE,
  LEAF_MAPPING,
  MULTIPLE_VALUE_RULE,
  OBJECT_MAPPING,
  OBJECT_PASS_THROUGH,
  OBJECT_REPLACEMENT,
  RULES,
} from '../../../settings';
import { getCurrentGroup } from '../utils';
import { renderPath } from '@/components/PathInput';
import SourceContext from '@/pages/Transformer/components/SourcePanel/context';
import NodePathSelect from '../../NodePathSelect';

const { Text } = Typography;

const RuleNameMapping = RULES.reduce((prev, next) => {
  prev[next.value] = next.title;
  return prev;
}, {});

const TagColorMapping = {
  [LEAF_MAPPING]: 'cyan',
  [OBJECT_MAPPING]: 'cyan',
  [ARRAY_MAPPING]: 'cyan',

  [OBJECT_PASS_THROUGH]: 'purple',
  [ARRAY_PASS_THROUGH]: 'purple',

  [OBJECT_REPLACEMENT]: 'geekblue',
  [ARRAY_REPLACEMENT]: 'geekblue',

  [CONST_RULE]: 'orange',
  [MULTIPLE_VALUE_RULE]: 'magenta',
};

function NodeInfo({ node, ...props }) {
  const group = getCurrentGroup(node);
  const { config } = group.rules[0];
  const ruleType = config.type;

  const { state: TContext = {} } = useContext(SourceContext);

  const treeData = [get(TContext, 'data')];
  const path = get(config, 'mapping[0].path');

  return (
    <Space style={{ display: 'flex', alignItems: 'center' }} {...props}>
      <Tag color={TagColorMapping[ruleType]}>{RuleNameMapping[ruleType]}</Tag>
      <Icon type="arrow-right" />
      {ruleType === CONST_RULE && <Text code>{get(config, 'value.stringValue')}</Text>}
      {ruleType === MULTIPLE_VALUE_RULE && <Text code>{get(config, 'expression')}</Text>}
      {[
        LEAF_MAPPING,
        OBJECT_MAPPING,
        ARRAY_MAPPING,
        OBJECT_PASS_THROUGH,
        ARRAY_PASS_THROUGH,
      ].includes(ruleType) &&
        path && (
          <NodePathSelect
            readOnly
            style={{ width: '500px' }}
            treeData={treeData}
            value={get(config, 'mapping[0].path')}
          />
        )}
    </Space>
  );
}

export default NodeInfo;
